<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>列表组组件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin:100px">
<!-- 列表组组件用于显示一组列表的组件
	1.基本实例	(由于用ul和li没有手型，所以我们用div和a)
		1)	.list-group 			//对父容器div添加
		2)	.list-group-item 		//对每一个a添加
			.list-group-item-success
			.list-group-item-info
			.list-group-item-warning
			.list-group-item-danger


	3.列表组件带勋章
		1)	.badge 					//对空span添加

	*)	.active 					//首选状态
		.disabled 					//禁用状态
 -->
 	
 	<div class="list-group">
 		<a href="#" class="list-group-item">1</a>
 		<a href="#" class="list-group-item active">2<span class="badge">3</span></a>
 		<a href="#" class="list-group-item">3</a>
 		<a href="#" class="list-group-item list-group-item-danger">4</a>
 		<a href="#" class="list-group-item">
			<h3>列表标题</h3>
			<p>内容...</p>
 		</a>
 	</div>






	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>